<template>
  <view
    class="zb-tooltip"
    :style="{
      '--theme-bg-color': color,
    }"
  >
    <view class="zb_tooltip_content" @click.stop="handleClick">
      <slot></slot>
      <view
        class="zb_tooltip__popper"
        :style="[
          style,
          {
            visibility: isShow ? 'visible' : 'hidden',
            background: background ? background : '',
            color: color === 'white' ? '' : '#fff',
            boxShadow:
              color === 'white'
                ? '0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d'
                : '0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.15);',
          },
        ]"
      >
        <slot name="content">{{ content }}</slot>
        <view
          class="zb_popper__icon"
          v-show="showIcon"
          :style="arrowStyle"
          :class="[
            {
              zb_popper__up: placement.indexOf('bottom') === 0,
              zb_popper__arrow: placement.indexOf('top') === 0,
              zb_popper__right: placement.indexOf('right') === 0,
              zb_popper__left: placement.indexOf('left') === 0,
            },
          ]"
        >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
	props: {
		visible: Boolean,
		background: String,
		color: {
			type: String,
			default: '#303133',
		},
		Idx: {
			type: Number,
			default: null,
		},
		keyval: {
			type: String,
			default: '',
		},
		placement: {
			type: String,
			default: 'top',
		},
		content: {
			type: String,
			default: '',
		},
		show: {
			type: Boolean,
			default: false,
		},
		showIcon: {
			type: Boolean,
			default: true,
		},
		right: {
			type: [String, Number],
			default: '',
		},
		topS: {
			// 电梯详情页面
			type: [String, Number],
			default: '',
		},
		arrowLeft: {
			type: [String, Number],
		},
	},

	data() {
		return {
			isShow: this.visible,
			title: 'Hello',
			// arrowLeft:0,
			query: null,
			style: {},
			arrowStyle: {},
		};
	},
	created() {},
	beforeDestroy() {
		uni.$off('tooltipsClose');
		console.log('tooltipsClose',this.keyval);
	},
	watch: {
		isShow: {
			handler(val) {
				this.$emit('handchange', val);
				this.$emit('update:visible', val);
				if (val) {
					uni.$once('tooltipsClose', this.close);
				}
			},
			immediate: true,
		},
		visible: {
			handler(val) {
				this.isShow = val;
				if (val) {
					this.$nextTick(() => {
						this.handleClick();
					});
				}
			},
			immediate: true,
		},
	},
	mounted() {
		// #ifdef H5
		window.addEventListener('click', () => {
			this.isShow = false;
		});

		// #endif
	},
	methods: {
		close() {
			// console.log(11111);
			this.isShow = false;
		},
		fixedWrap() {
			this.isShow = false;
		},
		handleClick() {
			// console.log(2222);
			if (this.isShow) {
				this.isShow = false;
				return;
			}
			uni.$emit('tooltipsClose');
			uni
				.createSelectorQuery()
				.in(this)
				.selectAll('.zb_tooltip_content,.zb_tooltip__popper')
				.boundingClientRect(async (data) => {
					let { left, bottom, right, top, width, height } = data[0];
					let obj1 = data[1];

					let objStyle = {};
					let objStyle1 = {};
					switch (this.placement) {
					case 'top':
						if (obj1.width > width) {
							objStyle.left = `-${(obj1.width - width) / 2}px`;
						} else {
							objStyle.left = `${Math.abs(obj1.width - width) / 2}px`;
						}

						objStyle.bottom = `${height + 8}px`;
						objStyle1.left = obj1.width / 2 - 6 + 'px';

						break;
					case 'top-start':
						objStyle.left = '0px';
						objStyle.bottom = `${height + 8}px`;
						break;

					case 'top-end':
						objStyle.right = '0px';
						objStyle.bottom = `${height + 8}px`;
						objStyle1.right = '8px';
						break;

					case 'bottom':
						if (obj1.width > width) {
							if (this.right > 0) {
								objStyle.left = `-${
									(obj1.width - width) / 2 - this.right ? this.right : 0
								}px`;
							} else {
								objStyle.left = `-${(obj1.width - width) / 2}px`;
							}
						} else {
							objStyle.left = `${Math.abs(obj1.width - width) / 2}px`;
						}

						objStyle.top = `${height + 8}px`;
						objStyle1.left = obj1.width / 2 - 6 + 'px';
						if (this.topS) {
							// 电梯详情页面
							objStyle.top = this.topS + 'px';
						}
						objStyle1.left = this.arrowLeft
							? this.arrowLeft + 'px'
							: obj1.width / 2 - 6 + 'px';

						break;

					case 'bottom-start':
						objStyle.left = this.arrowLeft ? this.arrowLeft + 'px' : '0px';
						objStyle.top = `${height + 8}px`;
						objStyle1.left = 6 + -1 * Number(this.arrowLeft || 0) + 'px';
						break;

					case 'bottom-end':
						objStyle.right = '0px';
						objStyle.top = `${height + 8}px`;
						objStyle1.right = '8px';
						break;

					case 'right':
						objStyle.left = `${width + 8}px`;
						if (obj1.height > height) {
							objStyle.top = `-${(obj1.height - height) / 2}px`;
						} else {
							objStyle.top = `${Math.abs((obj1.height - height) / 2)}px`;
						}

						objStyle1.top = `${obj1.height / 2 - 6}px`;
						break;
					case 'right-start':
						objStyle.left = `${width + 8}px`;
						objStyle.top = '0px';
						objStyle1.top = '8px';
						break;

					case 'right-end':
						objStyle.left = `${width + 8}px`;
						objStyle.bottom = '0px';
						objStyle1.bottom = '8px';
						break;

					case 'left':
						objStyle.right = `${width + 8}px`;

						if (obj1.height > height) {
							objStyle.top = `-${(obj1.height - height) / 2}px`;
						} else {
							objStyle.top = `${Math.abs((obj1.height - height) / 2)}px`;
						}

						objStyle1.top = `${obj1.height / 2 - 6}px`;
						break;

					case 'left-start':
						objStyle.right = `${width + 8}px`;
						objStyle.top = '0px';
						objStyle1.top = '8px';
						break;

					case 'left-end':
						objStyle.right = `${width + 8}px`;
						objStyle.bottom = '0px';
						objStyle1.bottom = '8px';
						break;
					}
					this.style = objStyle;
					// 三角形箭头
					let arrsse = [];
					for (const key in objStyle1) {
						arrsse.push(key + ':' + objStyle1[key] + ';');
					}
					this.arrowStyle = arrsse.join('');

					this.isShow = true;
				})
				.exec();
		},
	},
};
</script>

<style lang="scss" scoped>
$theme-bg-color: var(--theme-bg-color);

.zb-tooltip {
  position: relative;
  font-weight: normal;
}
.zb_tooltip_content {
  height: 100%;
  /* float: left; */
  position: relative;
  display: inline-block;

  // display: flex;
  // flex-direction: row;
  // align-items: center;
  /* overflow: hidden; */
}
.zb_tooltip__popper {
  /* transform-origin: center top; */
  background: $theme-bg-color;
  font-weight: normal;
  visibility: hidden;
  // color:'#fff';
  position: absolute;
  border-radius: 16rpx;
  font-size: 12px;
  padding: 10px;
  min-width: 10px;
  word-wrap: break-word;
  display: inline-block;
  white-space: nowrap;
  z-index: 9;
}
.zb_popper__icon {
  width: 0;
  height: 0;
  z-index: 9;
  position: absolute;
}
.zb_popper__arrow {
  bottom: -5px;
  /* transform-origin: center top; */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid $theme-bg-color;
}
.zb_popper__right {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid $theme-bg-color;
  left: -5px;
}

.zb_popper__left {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid $theme-bg-color;
  right: -5px;
}

.zb_popper__up {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid $theme-bg-color;
  top: -5px;
}
.fixed {
  position: absolute;
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: auto;
  background: red;
  z-index: -1;
}
</style>
